<template>
	<view>
		<view class="flex">
			
			<view class="flex flex-direction items-center justify-center egg" v-if="isChinken == 1" @tap.stop="eggChicken">
				<text class="color-red-6 text-xs leading-sm">♥</text>
				<text class="color-red-6 leading-sm">{{info.egg_num||0}}</text>
			</view>
			<view class="eggpen" v-if="isChinken == 1"></view>
			
			
			<view class="chicken" v-if="isChinken == 1">
				<view class="foodTime" v-if="feed_time">剩余  <min-countdown style="color: #FFFFFF;" :targetTime="feed_time" @callback="feedCallback"></min-countdown></view>
				<view class="chickenEye"></view>
				<image class="chickenHand" src="/static/chicken/hand.png" mode="aspectFit"></image>
				<image class="chickenFood" src="/static/chicken/food.png" mode="aspectFit" v-if="isFeed == 1"></image>
				<view class="chickenMouth"></view>
			</view>
			<image class="chickenBuy" v-if="isChinken == 0" src="/static/chicken/buy.png" mode="aspectFit" @tap.stop="buyChicken"></image>
			
			<view class="bowl" v-if="isChinken == 1" @tap.stop="feedChicken">
				<view class="bowlFood">
					<view class="foodText">剩余{{info.point}}</view>
				</view>
			</view>
			
			
		</view>
		<view class="user">
			<view class="cover">
				<image :src="userHeadimg"></image>
			</view>
			<view class="info">
				<view class="name">
					<text class="name">{{info.nickname}}</text>
					<image class="is-real" src="/static/img/is_real.png"></image>
				</view>
				<view class="drop">
					<text>红积分{{info.red_point}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import minCountdown from '@/components/min-countdown/min-countdown.vue'
	export default {
		components: {
			minCountdown
		},
		data() {
			return {
				userHeadimg: '/static/img/logo.png',
				isChinken: 0,
				isFeed: 0,
				feed_price: 0,
				buy_price: 0,
				feed_time: 0,
				info: {}
			};
		},
		onLoad() {
			// #ifdef APP-PLUS
			plus.nativeUI.showWaiting('加载中……');
			// #endif
			this.feed_time = 0;
			this.getInfo()
		},
		onShow() {
			if(!uni.getStorageSync('token')){
				uni.navigateBack({
				    delta: 1
				});
			}
		},
		onHide() {
			uni.navigateBack({
			    delta: 1
			});
		},
		onReady() {
			// #ifdef APP-PLUS
			plus.nativeUI.closeWaiting();
			// #endif
		},
		methods: {
			// async chickenRedReceive() {
			// 	var self = this
			// 	let res = await huicheng.chickenRedReceive();
			// 	if(res.statusCode === 200){
			// 		var data = res.data;
			// 		if (data.code == 1) {

			// 		}
			// 	}
			// },
			
			//$util.countDown(feed_time)
			async getInfo() {
				var self = this
				this.$api.sendRequest({
					url: '/api/Chicken/chickenGetInfo',
					data: {},
					success: res => {
						var data = res;
						if (data.code == 0) {
							if (data.data.headimg) {
								self.userHeadimg = data.data.headimg + '?x-oss-process=image/resize,m_fill,h_100,w_100'
							}else{
								self.userHeadimg = '/static/img/logo.png'
							}
							self.isChinken = data.isChinken
							self.isFeed = data.isFeed
							self.buy_price = data.buy_price
							self.feed_price = data.feed_price
							self.feed_time = data.feed_time
							self.info = data.data
						}
					}
				});
			},
			feedCallback(){
				this.getInfo()
			},
			buyChicken() {
				let self = this
				uni.showModal({
				    content: '购买一只小鸡需要消耗'+self.buy_price+'积分',
				    success: async function (res) {
				        if (res.confirm) {
							self.$api.sendRequest({
								url: '/api/Chicken/buy',
								data: {},
								success: res => {
									var data = res;
									if (data.code == 0) {
										self.isChinken = 1
									}
								}
							});
				        }
				    }
				});
			},
			feedChicken(){
				let self = this
				uni.showModal({
				    content: '喂养小鸡需要消耗'+self.feed_price+'积分',
				    success: async function (res) {
				        if (res.confirm) {
							self.$api.sendRequest({
								url: '/api/Chicken/feed',
								data: {},
								success: res => {
									var data = res;
									if (data.code == 0) {
										self.isFeed = 1
										self.getInfo()
									}else{
										uni.showToast({
											title: res.message,
											icon: 'none'
										})
									}
								}
							});
				        }
				    }
				});
			},
			eggChicken(){
				var self = this
				uni.showModal({
				    content: '是否领取鸡蛋转换为红积分',
				    success: async function (res) {
				        if (res.confirm) {
							self.$api.sendRequest({
								url: '/api/Chicken/chickenEggReceive',
								data: {},
								success: res => {
									var data = res;
									self.getInfo()
									uni.showModal({
										content: data.message,
									})
								}
							});
				        }
				    }
				});
			}
		}
	};
</script>

<style>
	page{
		background-image: url('~@/static/chicken/bg.jpg');
		background-repeat: no-repeat;
		background-size: cover;
	}
	
	.user{position: absolute;
		right: 20rpx;
		top: 180rpx; display: flex; flex-direction: row;}
	.user .cover{ padding: 20rpx 20rpx 0;}
	.user .cover image{ width: 80rpx; height: 80rpx; border-radius: 50%;}
	
	.user .info { display: flex; flex-direction: column; color: white; justify-content: flex-start; padding-top: 16rpx; font-weight: bold; text-shadow: 4rpx 4rpx 2rpx #085828;}
	.user .info .name{ font-size: 30rpx; color: white;}
	.user .info .name .is-real{ width: 25rpx; height: 25rpx; background-size: contain;}
	.user .info .name view{ margin-left: 12rpx; display: inline-block; vertical-align: middle;}
	.user .info .drop{ margin-top: 10rpx; line-height: 32rpx; font-size: 26rpx;color: #FFFFFF;}

	.bowl{
		background-image: url('~@/static/chicken/bowl.png');
		background-repeat: no-repeat;
		background-size: cover;
		position: absolute;
		right: 40rpx;
		bottom: 200rpx;
		width: 150rpx;
		height: 60rpx;
		z-index: 12;
	}
	.bowlFood{
		background-image: url('~@/static/chicken/bowlFood.png');
		background-repeat: no-repeat;
		background-size: cover;
		position: absolute;
		right: 5rpx;
		bottom: 53rpx;
		width: 140rpx;
		height: 50rpx;
		z-index: 11;
	}
	.foodText{
		margin-top: 105rpx;
		text-align: center;
		text-decoration:underline;
		color: #a2410e;
	}
	
	.egg{
		background-image: url('~@/static/chicken/egg.png');
		background-repeat: no-repeat;
		background-size: cover;
		position: absolute;
		left: 40rpx;
		bottom: 265rpx;
		width: 170rpx;
		height: 198rpx;
		z-index: 11;
		padding-top: 16rpx;
	}
	.eggpen{
		background-image: url('~@/static/chicken/danwo.png');
		background-repeat: no-repeat;
		background-size: cover;
		position: absolute;
		left: 50rpx;
		bottom: 285rpx;
		width: 150rpx;
		height: 102rpx;
		z-index: 10;
	}
	
	.chickenBuy{
		position: absolute;
		left: 225rpx;
		bottom: 180rpx;
		width: 350rpx;
		height: 350rpx;
	}
	
	.chicken {
		position: absolute;
		left: 250rpx;
		bottom: 200rpx;
		width: 300rpx;
		height: 350rpx;
		background-image: url('~@/static/chicken/chicken.png');
		background-repeat: no-repeat;
		background-size: cover;
		animation: chicken 2s linear infinite;
	}
	.foodTime{
		position: absolute;
		left: 0rpx;
		top: -40rpx;
		color: #ffffff;
		width: 300rpx;
		text-align: center;
	}
	.chickenEye {
		position: absolute;
		left: 85rpx;
		top: 80rpx;
		width: 150rpx;
		height: 50rpx;
		z-index: 10;
		animation: handEye 3s linear infinite;
		background-repeat: no-repeat;
		background-size: cover;
	}
	.chickenMouth {
		position: absolute;
		left: 135rpx;
		top: 140rpx;
		width: 50rpx;
		height: 50rpx;
		z-index: 10;
		animation: handMouth 0.6s linear infinite;
		background-repeat: no-repeat;
		background-size: cover;
	}
	.chickenHand {
		position: absolute;
		right: -30rpx;
		top: 150rpx;
		width: 190rpx;
		height: 130rpx;
		z-index: 12;
		animation: handFood 1.5s linear infinite;
	}
	.chickenFood {
		z-index: 11;
		position: absolute;
		right: 50rpx;
		top: 150rpx;
		width: 120rpx;
		height: 90rpx;
		animation: handFood 1.5s linear infinite;
	}
	

	@keyframes handEye {
		0%{background-image: url();}
		20%,100%{background-image: url();}
	}
	
	@keyframes handMouth {
		0% {background-image: url();}
		100% {background-image: url();}
	}

	
	
	@keyframes chicken {
		0%  {transform: translate3d(0, 0, 0);}
		20% {transform: translate3d(0rpx, 0, 0) rotate(0deg);}
		30% {transform: translate3d(0rpx, 0, 0) rotate(0deg);}
		80% {transform: translate3d(0rpx, 0, 0) rotate(0deg);}
		100%{transform: translate3d(0, 0, 0)  rotate(0deg);}
	}
	
	@keyframes handFood {
		0%  {transform: translate3d(0, 0, 0);}
		20% {transform: translate3d(0, 0rpx, 0);}
		30% {transform: translate3d(5rpx, 5rpx, 0) rotate(-3deg);}
		80% {transform: translate3d(8rpx, 6rpx, 0) rotate(-3deg);}
		100%{transform: translate3d(0, 0, 0)  rotate(0deg);}
	}
</style>